<script lang="jsx">
export default {
    name: 'uni-byt-table',
    props: {
        // 需要展示的列
        columns: {
            type: Array,
            default: () => {
                // 列对象格式
                const obj = {
                    // 标题
                    title: '1',
                    // 主键key
                    key: '1',
                    width: '',
                    align: 'left',
                    fixed: 'right',
                    render: () => {
                        return '<button>按钮</button>';
                    }
                };

                return [];
            }
        },
        // 数据
        data: {
            type: Array,
            default: () => []
        },
        // 高度
        height: {
            type: String,
            default: ''
        },
        // 最大高度
        maxHeight: {
            type: String,
            default: ''
        },
        // 最小高度
        minHeight: {
            type: String,
            default: ''
        },
        // 展示的最大列数
        colNum: {
            type: Number,
            default: 4
        }
    },
    data() {
        return {
            tableWidth: 750
        };
    },
    mounted() {
        this.tableWidth = this.$refs.table.$el.clientWidth * 2;
        console.log('表格宽度：', this.tableWidth);
    },
    methods: {
        toast(title) {
            uni.$u.toast(title);
        },
        click(row) {
            this.$emit('click', row);
        }
    }
};
</script>

<template>
    <scroll-view :scroll-y="true" :style="{ height: height, maxHeight: maxHeight, minHeight: minHeight }" ref="table" class="border">
        <scroll-view :scroll-x="true">
            <view class="flex-row items-center">
                <view
                    class="text-over shrink-0 flex-col"
                    v-for="(item, index) in columns"
                    :key="item.key"
                    :style="{
                        width: (item.width ? item.width : columns.length > Number(colNum) ? tableWidth / (Number(colNum) - 0.08) : '') + 'rpx',
                        position: 'sticky',
                        right: item.fixed == 'right' ? '0' : '',
                        left: item.fixed == 'left' ? '0' : ''
                    }"
                    :class="{ 'box-shadow': item.fixed, 'flex-1': !item.width && columns.length <= Number(colNum) }"
                >
                    <view
                        @click="toast(item.title)"
                        :style="{
                            width: (item.width ? item.width : columns.length > Number(colNum) ? tableWidth / (Number(colNum) - 0.08) : '') + 'rpx'
                        }"
                        class="bg-ti text-over flex-row items-center"
                        :class="{
                            'flex-1': !item.width && columns.length <= Number(colNum),
                            'jty-start': item.align == 'left',
                            'jty-center': item.align == 'center',
                            'jty-end': item.align == 'right'
                        }"
                    >
                        <text class="text-14 h-30 flex-row items-center px-5">{{ item.title }}</text>
                    </view>
                    <view class="flex-col">
                        <text
                            @click="toast(itemC)"
                            class="text-14 h-40 px-5 flex-row items-center bg-white text-over"
                            :class="{ 'jty-start': item.align == 'left', 'jty-center': item.align == 'center', 'jty-end': item.align == 'right' }"
                            v-for="(itemC, indexC) in data.map((itemV) => itemV[item.key])"
                            v-if="itemC"
                        >
                            {{ itemC }}
                        </text>
                    </view>
                    <view v-if="item.render" class="flex-col">
                        <view
                            @click="click(data[indexC])"
                            class="text-14 h-40 px-5 flex-row items-center bg-white text-over"
                            :class="{ 'jty-start': item.align == 'left', 'jty-center': item.align == 'center', 'jty-end': item.align == 'right' }"
                            v-for="(itemC, indexC) in data.length"
                            v-html="item.render()"
                        ></view>
                    </view>
                    <view v-if="item.slotShow" class="flex-col">
                        <view
                            v-if="item.slotShow"
                            class="text-14 h-40 px-5 flex-row items-center bg-white text-over"
                            :class="{ 'jty-start': item.align == 'left', 'jty-center': item.align == 'center', 'jty-end': item.align == 'right' }"
                            v-for="(itemC, indexC) in data.length"
                        >
                            <slot :row="data[indexC]"></slot>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="data.length == 0" class="py-12">
                <u-empty mode="data"></u-empty>
            </view>
        </scroll-view>
    </scroll-view>
</template>

<style scoped>
view {
    box-sizing: border-box;
}

.box-shadow {
    box-shadow: 0px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 99;
}
</style>